<template>
  <div class="fix-nav">
      <ul class="fix-order-nav" :class="toggle?'ne-ami':'ne-show'">
        <li class="flex flex-center" :class="{active:item.active}" v-for="(item,index) in fixNavList" :key="index">
          <div class="">
            <div>
              <a @click="clickEvent(item.clickEvent,item.link)" class="flex-column flex-center"><i :class="item.icon"></i><p>{{ item.name }}</p></a>
            </div>
          </div>
        </li>
<!--        <li class="flex flex-center">-->
<!--          <div class="">-->
<!--            <router-link to="/ordertemp">-->
<!--              <a class="flex-column flex-center"><i class="iconfont icon-zancun-01"></i><p>暂存</p>-->
<!--&lt;!&ndash;                <i class="num">10</i>&ndash;&gt; -->
<!--              </a>-->
<!--            </router-link>-->
<!--          </div>-->
<!--        </li>-->
      </ul>
    <i class="icon ne-toggle" :class="toggle?'zk':''" @click="toggleFun"></i>
  </div>
</template>
<script>
export default {
  name: "FixNav",
  data() {
    return {
      toggle:false,
      // fixNavList:[
      //   {
      //     link:'/orderadd',
      //     name:'订购',
      //     icon:'iconfont icon-dingyue',
      //     active: 'true'
      //   },
      //   {
      //     link:'',
      //     name:'补点',
      //     icon:'iconfont icon-ding'
      //   },
      //   {
      //     link:'',
      //     name:'补录',
      //     icon:'iconfont icon-lurubaogao'
      //   },
      //   {
      //     link:'/ordertemp',
      //     name:'暂存',
      //     icon:'iconfont icon-zancun-01'
      //   },
      // ]
    }
  },
  props: {
    fixNavList:{
      type:Array
    }
  },
  mounted() {

  },
  created() {

  },
  components: {},
  methods: {
    clickEvent(param,link){
      if(param=='await'){
        this.$alert('<div class="text-center" style="padding-top: .1rem;"><i class="ne-await iconfont icon-jingqingqidai01" style="font-size: .6rem; color:#f56d39;"></i><p style="padding-top: .1rem;">功能暂未开放,敬请期待！</p></div>', '', {
          dangerouslyUseHTMLString: true
        });
        return
      }
      if(link == '/custinfo' && sessionStorage.getItem('proFlag')){
         this.$router.push({ path:'/custinfo',query:{proFlag:sessionStorage.getItem('proFlag')}});//5G产品要带标识跳转
      }else {
        this.$router.push(link)
      }
    },
    toggleFun(){
      this.toggle=!this.toggle;
    }
  }
}
</script>

<style lang="scss" scoped>
.fix-nav{
  display: inline-block;
  .fix-order-nav{
    width: .8rem;
    height: 3.8rem;
    position: fixed;
    bottom: 0;
    top:0;
    margin: auto 0;
    right: 0;
    z-index: 99;
  }
  .ne-toggle{
    position: fixed;
    top:0;
    bottom: 0;
    right: 0;
    //right: -.21rem;
    margin: auto;
    display: inline-block;
    width: .15rem;
    height: 1.2rem;
    //background-image: url("~@/assets/imgs/order/n-toggle.png");
    background-image: url("~@/assets/imgs/order/n-toggle-active.png");
    background-repeat: no-repeat;
    background-size: 95% auto;
    background-position: center right;
    border-radius: 50%;
    &:hover{
      background-image: url("~@/assets/imgs/order/n-toggle-active.png");
    }
    &.zk{
      background-image: url("~@/assets/imgs/order/n-toggle-zk.png")!important;
    }
  }
  .fix-order-nav{
    li{
      width: .8rem;
      height: .8rem;
      background-color: rgba(45, 51, 61, 0.3);
      border-radius: 50%;
      margin-bottom: .2rem;
      cursor: pointer;
      div{
        width: .7rem;
        height: .7rem;
        background-color: #2D333D;
        border-radius: 50%;
        a{
          color: #fff;
          display: block;
          width: 100%;
          height: 100%;
          min-height: 50px;
          min-width: 50px;
          text-align: center;
          position: relative;
          border: 1px solid transparent;
          i.iconfont{
            display: inline-block;
            font-size: .22rem;
            //margin-bottom: .04rem;
            margin-top: .08rem;
          }
          p{
            font-size: $fontSize_v3;
          }
          .num{
            display: block;
            font-style: normal;
            position: absolute;
            right: -.05rem;
            top: 0;
            width: .22rem;
            height: .22rem;
            line-height: .22rem;
            background-color: rgba(255,0,0,.8);
            border-radius: 50%;
            text-align: center;
            font-size: .1rem;
          }
        }
      }
      &:hover{
        background-color: rgba(228, 117, 72, 0.3);
        div{
          background-color: $orange;
        }
      }
      &:nth-child(1){
        i.iconfont{
          font-size: .22rem;
        }
        p{
          position: relative;
          top:-.04rem;
        }
      }
      &:nth-child(2){
        i.iconfont{
          font-size: .21rem;
          margin-top: .07rem;
        }
        p{
          position: relative;
          top:-.03rem;
        }
      }
      &:nth-child(3){
        i.iconfont{
          font-size: .16rem;
          margin-top: .1rem;
        }
      }
      &:nth-child(4){
        i.iconfont{
          font-size: .18rem;
          margin-top: .08rem;
        }
      }
      &.active{
        background-color: rgba(228, 117, 72, 0.3);
        div{
          background-color: $orange;
          color: #fff;
        }
      }
    }
  }
  @keyframes move {
    0% {
      right: .15rem;
      opacity: 1;
    }
    100% {
      right: -1rem;
      opacity: 0;
    }
  }
  @keyframes zk {
    0% {
      right: -1rem;
      opacity: 0;
    }
    100% {
      right: .15rem;
      opacity: 1;
    }
  }
  .ne-ami {
    right: -1rem;
    -webkit-animation-name: move;
    animation-name: move;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
  }
  .ne-show {
    right: .15rem;
    -webkit-animation-name: zk;
    animation-name: zk;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
  }
}
</style>
